<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./assets/self-introduction.css">
  <title>个人简介</title>
</head>
<body>

<div class="main">
  <div class="bg-image">
    <div class="nav-top">
      <div class="studio-title">个人简介</div>
      <div class="nav-button-box">
        <div class="text-wrapper_1"><a href="#basic-message">基本信息</a></div>
        <div class="text-wrapper_1"><a href="#basic-ablility">基本技能</a></div>
        <div class="text-wrapper_1"><a href="#Tic_Tac_Toe">井字棋</a></div>
        <div class="text-wrapper_1"><a href="#mock">接口请求</a></div>
      </div>
    </div>
    <!-- 头像设置成可动 -->
    <div class="avatar-container">
      <div class="avatar">
        <img src="./assets/imgs/avatar.JPG" alt="" style="width: 200px;">
      </div>
    </div>
    <div class="nick-name">Lychn1s</div>
  </div>
  <div class="bg-main">
  </div>
  <div class="main-introduction">
    <div class="square">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
      </div>
      <div class="circle">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
      </div>
    <div class="home" id="basic-message">
      <div class="home-title1">个人资料</div>
      <div class="fame_wrapper">
        <div class="section_1 flex-col">
          <br />
          <div class="text_16">基本信息</div> 
          <br />
          <ul>
            <li>姓名：张楷卫</li>
            <li>性别：男</li>
            <li>网名：Lychn1s</li>
            <li>邮箱：1219555837@qq.com</li>
            <li>电话：15258291986</li>
            <li>籍贯：浙江宁波</li>
            <li>爱好：打球踢球打电动</li>
            <br>
            <li>活泼开朗积极向上</li>
            <li>不畏难题畏南桐</li>
          </ul>
        </div>
        <div class="section_2 flex-col">
          <br />
          <div class="text_17">个人荣誉</div>
          <br />
          <ul>
            <li>2021年军事训练“队列标兵”</li>
            <li>2021年“新生杯”五人制足球班赛冠军</li>
            <li>2021-2022学年二等奖学金</li>
            <li>IEEE工程师算法比赛前10%</li>
            <li>大一整年成绩年级排名74名</li>
          </ul>
        </div>
        <div class="section_3 flex-col">
          <br />
          <div class="text_18">项目经历与职位</div>
          <br />
          <ul>
            <li>链时代工作室前端负责人</li>
            <li>链时代工作室副主席</li>
            <li>参与达州乌梅园“智慧农业”项目开发</li>
            <li>参与宁波乐酷科技公司“集运家”项目微信小程序开发</li>
            <li>目前参与“地瓜劳工平台”项目微信小程序开发</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="About-us" id="basic-ablility">
      <div class="ab-who">
        <div class="ab-who-title">基本技能</div>
        <ul class="ab-who-introduction">
          <li>熟悉html5、css3（canvas还在学习捏）</li>
          <li>熟悉JavaScript,掌握ES6及以上常用语法</li>
          <li>熟悉vue2及vue3 框架，能熟练运用vue框架构建项目</li>
          <li>熟悉axios的使用，可熟练进行前后端交互</li>
          <li>了解前端工程化，可以实现webpack的基本配置</li>
          <li>了解Node.js,能使用express框架进行开发</li>
          <li>有开发微信小程序的经验，了解微信小程序中的api</li>
          <li>熟悉Git分布式存储系统，能无障碍参与团队的项目合作</li>
        </ul>
      </div>
      <img src='./assets/imgs/wumeiyun.png' title="乌梅园智慧项目截图" class="ab-who-photo"/>
      <div class="ab-what">
        为什么想要加入星辰工作室？
      </div>
      <div class="group_6">
        <P><del>（因为星辰工作室牛逼捏）</del>其实是因为个人也想多参加点项目提升，多结交些朋友扩大交际圈。之前在工作室听学长说星辰项目多而且是校工作室，
        同时之前一同参与开发的后端李城学长和朱利豪学长都是星辰工作室的，便更加有好感了，恰逢招新就冲了（但事情太多了所以做的比较晚）。其实这个自我介绍也是拿
        我之前做的工作室主页改的（当时一个人设计加画原型图加敲代码肝出来），现在恰好可以偷点懒。</P>
      </div>
      <img src='./assets/imgs/lianshidai.png' class="ab-what-photo"/>
    </div>
    <div class="honors" id="Tic_Tac_Toe">
      <div class="text_14">井字棋</div>
      <div id="tic-tac-toe">
        <div class="table-row">
          <div class="cell" id="0-0">
            <div class="circle"></div>
            <div class="X">×</div>
          </div>
          <div class="cell" id="0-1">
            <div class="circle"></div>
            <div class="X">×</div>
          </div>
          <div class="cell" id="0-2">
            <div class="circle"></div>
            <div class="X">×</div>
          </div>
        </div>
        <div class="table-row">
          <div class="cell" id="1-0">
            <div class="circle"></div>
            <div class="X">×</div>
          </div>
          <div class="cell" id="1-1">
            <div class="circle"></div>
            <div class="X">×</div>
          </div>
          <div class="cell" id="1-2">
            <div class="circle"></div>
            <div class="X">×</div>
          </div>
        </div>
        <div class="table-row">
          <div class="cell" id="2-0">
            <div class="circle"></div>
            <div class="X">×</div>
          </div>
          <div class="cell" id="2-1">
            <div class="circle"></div>
            <div class="X">×</div>
          </div>
          <div class="cell" id="2-2">
            <div class="circle"></div>
            <div class="X">×</div>
          </div>
        </div>
      </div>
    </div>
    <div class="join-us" id="mock">
      <div class="text_19">mock接口</div>
      <div class="mock-introduction">mock接口拿到了50个数据，这里截取前5个进行展示(拿到了图片的地址，但不能显示)</div>
      <button class="mock-btn"><a href="./login.html">点这返回登录界面</a></button>
      <div class="mock-box"></div>
    </div>
  </div>
  <div class="bottom">
    <div class="bottom-button-box">
        <button class="text-wrapper_2"><a href="#basic-message">基本信息</a></button>
        <button class="text-wrapper_2"><a href="#basic-ablility">基本技能</a></button>
        <button class="text-wrapper_2"><a href="#Tic_Tac_Toe">井字棋</a></button>
        <button class="text-wrapper_2"><a href="#mock">接口请求</a></button>
    </div>
  </div>
</div>

</body>

<script>
  const array =  [[0, 0, 0],[0, 0, 0],[0, 0, 0]];
  let steps = 0;
  const cells = document.querySelectorAll('.cell');
  // 初始化棋盘
  function initTable() {
    for(let i = 0;i < array.length; i++) {
      for(let j = 0;j < array[i].length; j++) {
        array[i][j] = 0;
      }
    }
    for(cell of cells) {
      for(mark of cell.children) {
        mark.style.display = "none";
      }
    }
  }

  // 判断是否赢的函数
  function isWin() {
    // 判断和棋的标志，每一行还有没有0
    let zero_num = 0;
    for(let i = 0;i < array.length; i++) {
      if(array[i].indexOf(0) == -1) {
        zero_num++;
      }
      // 判断一行全是一样的赢
      if(array[i][0] === array[i][1] && array[i][0] === array[i][2] && array[i][0] != 0) {
          if(array[i][0] === 1) {
            alert("圈圈赢了！");
          } else {
            alert("叉叉赢了！");
          }
          initTable();
        } 
      // 判断一列都是一样的赢
      else if(array[0][i] === array[1][i] && array[0][i] === array[2][i] && array[0][i] != 0) {
          if(array[i][0] === 1) {
            alert("圈圈赢了！");
          } else {
            alert("叉叉赢了！");
          }
          initTable();
        }
      // 判断两行对角线是否一样的赢
      else if(array[0][0] === array[1][1] && array[1][1] === array[2][2] && array[1][1] != 0) {
        if(array[1][1] === 1) {
            alert("圈圈赢了！");
          } else {
            alert("叉叉赢了！");
          }
          initTable();
      } 
      else if(array[2][0] === array[1][1] && array[1][1] === array[0][2] && array[1][1] != 0) {
        if(array[1][1] === 1) {
            alert("圈圈赢了！");
          } else {
            alert("叉叉赢了！");
          }
          initTable();
      }
    }
    // 判断是否和棋
    if(zero_num === array.length) {
      alert("和棋！");
      initTable();
    }
  }

  for(cell of cells) {
    cell.addEventListener('click', function() {
      if(array[this.id[0]][this.id[this.id.length-1]] === 0) {
        steps++;
        if(steps % 2 === 1) {
          this.children[0].style.display = 'block';
          array[this.id[0]][this.id[this.id.length-1]] = 1;
        } else  {
          this.children[1].style.display = 'block';
          array[this.id[0]][this.id[this.id.length-1]] = 2;
        }
        setTimeout(isWin, 100);
      }
    })
  }

  const xhr = new XMLHttpRequest();
  xhr.open('GET','https://631333b8a8d3f673ffc6500b.mockapi.io/users');
  xhr.send();
  xhr.onreadystatechange = function() {
    if(xhr.readyState === 4) {
        if(xhr.status >= 200 && xhr.status < 300) {
          let data = xhr.response.slice(1, -1);
          const users = [];
          for(let i = 0;i < 5; i++) {
            let left_bracket = data.indexOf('{');
            let right_bracket = data.indexOf('}');
            // 拿到每一个对象并推入数组
            let obj = JSON.parse(data.slice(left_bracket, right_bracket+1));
            data = data.slice(right_bracket+2,);
            users.push(obj);
          }
          const mock_box = document.querySelector('.mock-box') 
          // 列表循环渲染
          for(user of users) {
            var mock_item = document.createElement('div');
            mock_item.className = 'mock-item';
            var mock_img = document.createElement('img');
            mock_img.src = user.avatar;
            mock_img.alt = "图寄了";
            mock_img.style = "width: 60px;height: 60px"
            mock_item.appendChild(mock_img);
            var mock_name = document.createElement('div');
            mock_name.innerText = user.name;
            mock_name.style = "width: 80px";
            mock_item.appendChild(mock_name);
            mock_box.appendChild(mock_item);  
        }
      }
    }
  }

</script>

</html>